const main = (that, detail, index = 1) => {
  return new Promise((resolve, reject) => {
    const _this = that;

    let ctx = wx.createCanvasContext("canvas", _this);

    // 模板1
    if (index == 1) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-1.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        140
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        180
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        210,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        230
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        250,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        270
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        290,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 580, 290)

    }


    // 模板2
    if (index == 2) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-2.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.setFillStyle('#ffffff');
      ctx.fillText(
        detail.name.value,
        30,
        120
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        160
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.fillText(
        '手机 : ' + detail.mobile.value,
        30,
        240
      );
      // 邮箱
      ctx.fillText(
        '邮箱 : ' + detail.email.value,
        30,
        280
      );
      // 地址

      ctx.fillText(
        '地址 : ',
        30,
        320
      );
      formatString(ctx, detail.address.value, 85, 430, 300)
    }

    if (index == 3) {
      // 背景图
      ctx.drawImage("/static/cards/card-bg-3.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        210
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        250
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        300,
        160,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        340,
        180
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        300,
        200,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        340,
        220
      );
      // 地址,需要计算字数
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        300,
        240,
        30,
        30
      );
      formatString(ctx, detail.address.value, 340, 660, 240)
    }

    if (index == 4) {
      // 背景图
      ctx.drawImage("/static/cards/card-bg-4.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        210
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        250
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.setFillStyle('#ffffff')
      ctx.fillText(
        '手机:',
        380,
        180
      );
      ctx.fillText(
        detail.mobile.value,
        430,
        180
      );
      // 邮箱
      ctx.fillText(
        '邮箱:',
        380,
        220
      );
      ctx.fillText(
        detail.email.value,
        430,
        220
      );
      // 地址,需要计算字数
      ctx.fillText(
        '地址:',
        380,
        260
      );
      formatString(ctx, detail.address.value, 430, 660, 240)

    }

    // 模板5
    if (index == 5) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-5.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        140
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        180
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        210,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        230
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        250,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        270
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        290,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 330, 290)
    }


    // 模板6
    if (index == 6) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-6.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        120
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        160
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        210,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        230
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        250,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        270
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        290,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 440, 290)
    }


    // 模板7
    if (index == 7) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-7.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        120
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        160
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        210,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        230
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        250,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        270
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        290,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 430, 290)
    }

    // 模板8
    if (index == 8) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-8.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        130,
        140
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        130,
        180
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.fillText(
        detail.mobile.value,
        130,
        278
      );
      // 邮箱
      ctx.fillText(
        detail.email.value,
        130,
        320
      );
      // 地址
      formatString(ctx, detail.address.value, 130, 530, 340)
    }

    // 模板9
    if (index == 9) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-9.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        120
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        160
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        220,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        240
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        260,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        280
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        300,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 430, 300)
    }

    // 模板10
    if (index == 10) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-10.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        110
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        150
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        180,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        200
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        220,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        240
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        260,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 440, 260)
    }

    // 模板11
    if (index == 11) {
      // 背景图
      ctx.drawImage("/static/cards/card-bg-11.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        210
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        250
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        300,
        180,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        340,
        200
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        300,
        220,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        340,
        240
      );
      // 地址,需要计算字数
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        300,
        260,
        30,
        30
      );
      formatString(ctx, detail.address.value, 340, 660, 260)
    }
    // 模板12
    if (index == 12) {

      // 背景图
      ctx.drawImage("/static/cards/card-bg-12.png", 0, 0, 690, 414);
      // 名字
      ctx.setFontSize(35);
      ctx.fillText(
        detail.name.value,
        30,
        100
      );
      // 职位
      ctx.setFontSize(20);
      ctx.fillText(
        detail.position.value,
        30,
        140
      );
      // 手机号码
      ctx.setFontSize(20);
      ctx.drawImage(
        "/static/cards/paper0-mobile-icon.png",
        30,
        210,
        30,
        30
      );
      ctx.fillText(
        detail.mobile.value,
        70,
        230
      );
      // 邮箱
      ctx.drawImage(
        "/static/cards/paper0-email-icon.png",
        30,
        250,
        30,
        30
      );
      ctx.fillText(
        detail.email.value,
        70,
        270
      );
      // 地址
      ctx.drawImage(
        "/static/cards/paper0-address-icon.png",
        30,
        290,
        30,
        30
      );
      formatString(ctx, detail.address.value, 70, 590, 290)
    }



    ctx.draw(false, () => {
      wx.canvasToTempFilePath(
        {
          canvasId: "canvas",
          width: 690,
          height: 414,
          success(res) {
            resolve(res);
          },
          fail(res) {
            console.log(res)
          }
        },
      );
    });
  });
};

function formatString(ctx, value, left, right, top) {
  console.log(value, left, right)
  let addressInitTop = top;
  let addressValueWidth = ctx.measureText(value).width;
  let addressValueLeft = left;
  let addressLength = value.length;
  let tmpWidth = 0;
  let contextArray = [];
  let tmpAddress = value.split('');
  let stringStart = 0;
  console.log(ctx.measureText('上海市黄浦区北京东路556号'))
  console.log(ctx.measureText('万达商业广场360-A室乔丹专卖店'))
  for (let i = 0; i < addressLength; i++) {
    const iWidth = ctx.measureText(value[i]).width
    tmpWidth += iWidth;
    // console.log(i, value[i], iWidth, tmpWidth, addressValueLeft, tmpWidth + addressValueLeft, right)
    if (tmpWidth + addressValueLeft > right) {
      let tmpStr = tmpAddress.slice(0, i-stringStart).join('');
      tmpAddress.splice(0, i - stringStart)
      // console.log(tmpStr)
      // console.log(tmpAddress)
      contextArray.push(tmpStr);
      tmpWidth = 0;
      stringStart = i;
    }
  }
  contextArray.push(
    tmpAddress.join("")
  );
  console.log(contextArray)
  let contextArrayLength = contextArray.length;
  for (let i = 0; i < contextArrayLength; i++) {
    ctx.fillText(
      contextArray[i],
      left,
      addressInitTop + 20
    );
    addressInitTop = addressInitTop + 10 + 20;
  }
}
module.exports = main;
